{% extends 'base/base.html' %}

{% block title %}
{{ recipe.name }} - 做菜指南
{% endblock %}

{% block main %}
<div class="row">
    <div class="col-md-8">
        <!-- 菜品基本信息 -->
        <div class="card mb-4">
            {% if recipe.image %}
            <img src="{{ recipe.image.url }}" class="card-img-top" alt="{{ recipe.name }}" style="height: 400px; object-fit: cover;">
            {% endif %}
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h1 class="card-title">{{ recipe.name }}</h1>
                    <div>
                        {% if recipe.created_by == request.user or request.user.is_superuser %}
                        <a href="{% url 'main:recipe_edit' recipe.id %}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit me-1"></i>编辑
                        </a>
                        {% endif %}
                        <a href="{% url 'main:recipe_list' %}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i>返回列表
                        </a>
                    </div>
                </div>
                
                {% if recipe.description %}
                <p class="card-text">{{ recipe.description }}</p>
                {% endif %}
                
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="display-6 text-primary">{{ recipe.get_difficulty_display_cn }}</div>
                            <small class="text-muted">难度</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="display-6 text-success">{{ recipe.get_total_cooking_time }}</div>
                            <small class="text-muted">制作时间</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="display-6 text-info">{{ recipe.servings }}</div>
                            <small class="text-muted">份数</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="display-6 text-warning">{{ recipe.category.name }}</div>
                            <small class="text-muted">分类</small>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    {% for tag in recipe.tags.all %}
                    <span class="badge me-1" style="background-color: {{ tag.color }};">{{ tag.name }}</span>
                    {% endfor %}
                </div>
                
                <div class="text-muted">
                    <small>
                        <i class="fas fa-user me-1"></i>
                        创建者: {{ recipe.created_by.username|default:"系统" }}
                        <i class="fas fa-calendar me-1 ms-3"></i>
                        创建时间: {{ recipe.created_at|date:"Y年m月d日" }}
                    </small>
                </div>
            </div>
        </div>

        <!-- 制作步骤 -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0"><i class="fas fa-list-ol me-2"></i>制作步骤</h4>
            </div>
            <div class="card-body">
                {% if steps %}
                {% for step in steps %}
                <div class="row mb-4">
                    <div class="col-md-2">
                        <div class="text-center">
                            <div class="badge bg-primary fs-4 p-3">{{ step.step_number }}</div>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <h5>{{ step.title }}</h5>
                        <p>{{ step.description }}</p>
                        
                        {% if step.image %}
                        <img src="{{ step.image.url }}" class="img-fluid mb-3" alt="{{ step.title }}" style="max-height: 200px;">
                        {% endif %}
                        
                        <div class="row">
                            {% if step.cooking_time %}
                            <div class="col-md-4">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>用时: {{ step.cooking_time }}
                                </small>
                            </div>
                            {% endif %}
                            {% if step.heat_level %}
                            <div class="col-md-4">
                                <small class="text-muted">
                                    <i class="fas fa-fire me-1"></i>火候: {{ step.heat_level }}
                                </small>
                            </div>
                            {% endif %}
                        </div>
                        
                        {% if step.tips %}
                        <div class="alert alert-info mt-2">
                            <i class="fas fa-lightbulb me-1"></i>
                            <strong>小贴士:</strong> {{ step.tips }}
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% if not forloop.last %}
                <hr>
                {% endif %}
                {% endfor %}
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-list-ol fa-3x text-muted mb-3"></i>
                    <p class="text-muted">暂无制作步骤</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- 所需食材 -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-shopping-basket me-2"></i>所需食材</h5>
            </div>
            <div class="card-body">
                {% if ingredients %}
                <ul class="list-unstyled">
                    {% for ingredient in ingredients %}
                    <li class="mb-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>{{ ingredient.name }}</span>
                            <span class="badge bg-light text-dark">{{ ingredient.amount }}{{ ingredient.unit }}</span>
                        </div>
                        {% if ingredient.notes %}
                        <small class="text-muted">{{ ingredient.notes }}</small>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="text-center py-3">
                    <i class="fas fa-shopping-basket fa-2x text-muted mb-2"></i>
                    <p class="text-muted">暂无食材信息</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">快速操作</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="window.print()">
                        <i class="fas fa-print me-1"></i>打印菜谱
                    </button>
                    <button class="btn btn-outline-success" onclick="shareRecipe()">
                        <i class="fas fa-share me-1"></i>分享菜谱
                    </button>
                    <a href="{% url 'main:recipe_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-list me-1"></i>查看更多菜谱
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
function shareRecipe() {
    if (navigator.share) {
        navigator.share({
            title: '{{ recipe.name }} - 做菜指南',
            text: '{{ recipe.description|truncatewords:20 }}',
            url: window.location.href
        });
    } else {
        // 复制链接到剪贴板
        navigator.clipboard.writeText(window.location.href).then(function() {
            alert('链接已复制到剪贴板！');
        });
    }
}

// 打印样式
window.addEventListener('beforeprint', function() {
    document.querySelector('.btn').style.display = 'none';
});

window.addEventListener('afterprint', function() {
    document.querySelector('.btn').style.display = 'block';
});
</script>
{% endblock %}

